<!-- views/sales/components/CustomerDetailDialog.vue -->
<template>
  <el-dialog
    v-model="visible"
    title="客户详情"
    width="600px"
    :before-close="handleClose"
  >
    <div class="customer-detail" v-if="customer">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="客户名称" :span="2">
              {{ customer.name }}
            </el-descriptions-item>
            <el-descriptions-item label="客户编码">
              {{ customer.code }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人信息" :span="2">
              {{ customer.contactPersons }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="customer.status === 1 ? 'success' : 'info'">
                {{ customer.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ customer.createdAt }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ customer.updatedAt }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'

interface ContactPerson {
  id: number
  name: string
  department: string
  position: string
  phone: string
  email: string
  remark: string
}

interface Customer {
  id: number
  name: string
  code: string
  contactPersons: string
  status: number
  createdAt: string
  updatedAt: string
}

interface SalesOrder {
  id: number
  orderNo: string
  productName: string
  quantity: number
  amount: number
  orderDate: string
  status: string
  remark: string
}

interface Contract {
  id: number
  contractNo: string
  startDate: string
  endDate: string
  amount: number
  status: string
  remark: string
}

interface Evaluation {
  id: number
  date: string
  evaluator: string
  score: number
  paymentScore: number
  cooperationScore: number
  growthScore: number
  remark: string
}

const props = defineProps<{
  modelValue: boolean
  customer: Customer | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('basic')
const loadingOrders = ref(false)

const salesOrders = ref<SalesOrder[]>([
  {
    id: 1,
    orderNo: 'SO20230101',
    productName: '高性能计算服务器',
    quantity: 10,
    amount: 500000,
    orderDate: '2023-01-01',
    status: 'completed',
    remark: '按时交付'
  }
])

const contracts = ref<Contract[]>([
  {
    id: 1,
    contractNo: 'CT20230101',
    startDate: '2023-01-01',
    endDate: '2024-01-01',
    amount: 1000000,
    status: 'active',
    remark: '年度框架协议'
  }
])

const evaluations = ref<Evaluation[]>([
  {
    id: 1,
    date: '2023-06-01',
    evaluator: '销售经理',
    score: 4.5,
    paymentScore: 4.8,
    cooperationScore: 4.2,
    growthScore: 4.5,
    remark: '付款及时，合作良好'
  }
])

const orderPagination = ref({
  page: 1,
  limit: 10,
  total: 1
})

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleOrderSizeChange = (size: number) => {
  orderPagination.value.limit = size
  // loadSalesOrders()
}

const handleOrderCurrentChange = (page: number) => {
  orderPagination.value.page = page
  // loadSalesOrders()
}

const getLevelType = (level: string) => {
  switch (level) {
    case 'key': return 'success'
    case 'normal': return 'primary'
    case 'potential': return 'warning'
    default: return 'info'
  }
}

const getLevelText = (level: string) => {
  switch (level) {
    case 'key': return '重要客户'
    case 'normal': return '普通客户'
    case 'potential': return '潜在客户'
    default: return '未知'
  }
}

const getOrderStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'processing': return 'warning'
    case 'shipped': return 'primary'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

const getOrderStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'processing': return '处理中'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    default: return '未知'
  }
}

const getContractStatusType = (status: string) => {
  switch (status) {
    case 'draft': return 'info'
    case 'active': return 'success'
    case 'expired': return 'warning'
    case 'terminated': return 'danger'
    default: return 'info'
  }
}

const getContractStatusText = (status: string) => {
  switch (status) {
    case 'draft': return '草稿'
    case 'active': return '生效中'
    case 'expired': return '已过期'
    case 'terminated': return '已终止'
    default: return '未知'
  }
}
</script>

<style scoped>
.customer-detail {
  padding: 20px 0;
}

.el-divider {
  margin: 20px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>